// F12 打开控制台，查看接口参数
// F12 打开控制台，查看接口参数
// F12 打开控制台，查看接口参数

<template>
  <div>
	  
	<!-- 条件 -->
	<input
	v-model="condition.name"
	placeholder="请输入姓名"
	/>
	<!-- END -->
	  
	<!-- 表格 -->
    <a-table
	:columns="columns"
	:data-source="tableData"
	:pagination="pagination"
	:rowKey="(record, index) => {return record.id}"
	@change="tableChange"
	/>
	<!-- END -->
	<h1>F12 打开控制台，查看接口参数</h1>
  </div>
</template>

<script>
export default {
  data() {
	  return {
		  
		// 列配置
		columns: [
			{
				title: '姓名',
				dataIndex: 'name'
			},
			{
				title: '年龄',
				dataIndex: 'age'
			}
		],
		
		// 分页器配置
		// 其他配置项参考: https://www.antdv.com/components/pagination-cn/
		pagination: {
			// showQuickJumper: true, //快速跳转至某页
			// current: 1, //当前页码索引
			total: 0,//总条数(从接口获取,然后赋值给此)
			defaultPageSize: 5,//[limit]默认每页的显示条数(接口获取多少条这里填写多少条)
			showTotal: total => `共 ${total} 条数据`,//用于显示数据总量和当前数据顺序
			showSizeChanger: true,//是否可以改变pageSize
			pageSizeOptions: ['5', '10'],//指定每页可以显示多少条
			onShowSizeChange: (current, pageSize) => this.pageSize = pageSize//这里默认不用改
		},
		  
		// 表格数据
		tableData: [],
		
		// 条件数据
		condition: {
			name: '',//姓名
			// ...
		}
	  }
  },
  
  mounted() {
	// 首次获取表格数据(接口)
	this.getTableData()
  },
  
  methods: {
  		  
	  /**
	   * 表格改变时触发
	   * @description 分页、排序、筛选变化时触发
	   * @param {Object} e - 分页数据
	   * @return void
	   */
	  tableChange(e) {
		// console.log(e)
		// 清洗请求接口所需数据及参数
		this.updataTable({
			page: e.current,//当前页数
			limit: e.pageSize,//每页显示条数
			param: this.condition,//搜索条件
			// ...
		})
	  },
	  
	  /**
	   * [带条件] 请求表格数据
	   * @description 改变表格数据
	   * @param {Object} e - 全部请求参数
	   * @return void
	   */
	  updataTable(e) {
		  // 请求接口
		  // axios.get(e).then(...)
		  console.log(`当前搜索条件: ${e.param.name}`)
		  console.log(`基本参数: ${e.page}, ${e.limit}`)
		  console.log(`---------------------------------`)
		  
		  // 重新赋值表格数据
		  // this.tableData = res.data
	  },
	  
	  /**
	   * 首次获取表格数据(接口)
	   * @description 请求接口获取数据(传参: 多少页/一页多少条/总条数)
	   * @return void
	   */
	  getTableData() {
				  
		// 假设请求接口获取了以下数据
		const api = {
			total: 10,//总条数
			data: [
				{ id: 1, name: '小王', age: 22 },
				{ id: 2, name: '小红', age: 24 },
				{ id: 3, name: '小张', age: 25 },
				{ id: 4, name: '小李', age: 54 },
				{ id: 5, name: '小刘', age: 51 },
				{ id: 6, name: '小孙', age: 23 },
				{ id: 7, name: '小徐', age: 26 },
				{ id: 8, name: '小赵', age: 22 },
				{ id: 9, name: '小周', age: 78 },
				{ id: 10, name: '小吴', age: 47 },
			]
		}

		// 赋值表格数据
		this.tableData = api.data

		// 赋值总条数
		this.pagination.total = api.total
	  },
	  
  }
}
</script>

<style>

</style>